<template>
  <!-- 富文本编辑器 -->
  <div>
    <div id="editorElem" style="text-align:left"></div>
  </div>
</template>
<script>
import E from "wangeditor";
export default {
  name: "editor",
  props: {
    content: String
  },
  data() {
    return {
      editorContent: this.content || "",
      obj: null
    };
  },
  methods: {
    getContent() {
      return this.editorContent;
    },
    setContent() {
      this.obj.txt.html(this.content);
    },
    clear() {
      this.obj.txt.html("<p><br></p>");
    }
  },
  mounted() {
    var editor = new E("#editorElem");
    this.obj = editor;
    //editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
    // editor.customConfig.uploadImgServer = '/api/isv/backstage/htmlfileUpload';  //上传图片到服务器
    // editor.customConfig.uploadFileName = 'file_path';
    // editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;//设置图片大小为2M
    // editor.customConfig.uploadImgTimeout = 1000000; //图片上传超时限制10s
    //默认富文本的菜单选项是所有菜单
    // menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough',
    // 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote',
    // 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo']
    editor.customConfig.menus = [
      "head", // 标题
      "strikeThrough", // 删除线
      "link", // 插入链接
      // 'image',  // 插入图片
      "list", // 列表
      "justify", // 对齐方式
      "quote", // 引用
      // 'emoticon',  // 表情
      "foreColor",
      "bold", // 粗体
      "italic", // 斜体
      "underline", // 下划线
      // 'table',  // 表格
      // 'code',  // 插入代码
      "undo" // 撤销
    ];

    // editor.customConfig.uploadImgHeaders = {
    //     'Accept': '*/*',
    //     'Authorization': 'Bearer ' + token    //头部token
    // }

    editor.customConfig.uploadImgHooks = {
      before: function(xhr, editor, files) {
        // 图片上传之前触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
        // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
        // return {
        //     prevent: true,
        //     msg: '放弃上传'
        // }
      },
      success: function(xhr, editor, result) {
        // 图片上传并返回结果，图片插入成功之后触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        // this.imgUrl = Object.values(result.data).toString()
      },
      fail: function(xhr, editor, result) {
        // 图片上传并返回结果，但图片插入错误时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
      },
      error: function(xhr, editor) {
        // 图片上传出错时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },
      timeout: function(xhr, editor) {
        // 图片上传超时时触发
        // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
      },

      // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
      // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
      customInsert: function(insertImg, result, editor) {
        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
        let url = Object.values(result.data); //result.data就是服务器返回的图片名字和链接
        JSON.stringify(url); //在这里转成JSON格式
        insertImg(url);
        // result 必须是一个 JSON 格式字符串！！！否则报错
      }
    };

    editor.customConfig.onchange = html => {
      this.editorContent = html;
    };
    editor.create();
  }
};
</script>
